<template>
  <div>
      <div class="pd20">
        <div class="row-spaceb">
          <p class="fwbold fs-md">需求详情</p>
          <el-button type="primary" size="medium" plain @click="goBackList">返回</el-button>
        </div>
        <el-divider></el-divider>
        <el-steps :active="detailStep" class="mg30 ml80 mr80" align-center finish-status="success">
            <el-step title="需求描述"></el-step>
            <el-step title="等待审核"></el-step>
            <el-step title="完成发布"></el-step>
        </el-steps>
        <div class="ml20">
            <div class="row-start">
                <div class="left-border"></div>
                <div class="ml5 fs16 fwbold">申请对接服务商信息</div>
            </div>
            <div>
            <div class="fs14 color-warning mt15 mb15"><i class="el-icon-warning" />广西制造业企业培优育强服务券平台对服务商做合规性检查，请企业对接需求时做进一步核验。</div>
            <el-table :data="services" style="width: 100%" size="medium" :header-cell-style="{background:'rgb(252, 241, 231)',color:'#606266'}">
                <el-table-column type="index"></el-table-column>
                <el-table-column label="服务商名称" prop="serviceName"></el-table-column>
                <el-table-column label="联系方式" prop="servicePhone"></el-table-column>
                <el-table-column label="申请对接时间" prop="applyTime">
                    <template slot-scope="scope">
                      {{scope.row.applyTime ? moment(scope.row.applyTime).format('YYYY-MM-DD HH:mm:ss') : '--'}}
                    </template>
                </el-table-column>
                <el-table-column label="操作" prop="bidAmt">
                    <template slot-scope="scope">
                        <el-button type="text" @click="reviewItem( scope.row)">
                         查看服务商机构
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            </div>
        </div>
        <div class="mt30 tc">
            <el-button disabled v-if="this.serviceData.status == 5" type="success" size="medium">已解决</el-button>
            <el-button v-else type="primary" size="medium" @click="closeRequirement">已解决，关闭需求</el-button>
        </div>
        <div class="ml20 mt30">
            <div class="row-start">
                <div class="left-border"></div>
                <div class="ml5 fs16 fwbold">基本信息</div>
            </div>
            <el-descriptions class="mt20" title="" :column="2" border>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-user"></i>
                        需求名称
                    </template>
                    {{serviceData.requirement}}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-date"></i>
                        发布时间
                    </template>
                    {{serviceData.publishTime ? moment(serviceData.publishTime).format('YYYY-MM-DD HH:mm:ss') : '--'}}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-folder-opened"></i>
                        需求分类
                    </template>
                    {{serviceData.requirementTypeName}}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-coin"></i>
                        预算金额
                    </template>
                    <el-tag size="small">{{serviceData.budget ? `${serviceData.budget}元` : '需服务商报价'}}</el-tag>
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-phone"></i>
                        联系方式
                    </template>
                    {{serviceData.companyPhone}}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-finished"></i>
                        对接状态
                    </template>
                  目前已有{{serviceData.serviceCount || 0}}家服务商对接
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-office-building"></i>
                        需求企业
                    </template>
                    {{serviceData.companyName}}
                </el-descriptions-item>
            </el-descriptions>
        </div>
        <div class="ml20 mt30">
            <div class="row-start">
                <div class="left-border"></div>
                <div class="ml5 fs16 fwbold">需求内容</div>
            </div>
            <div class="mt20">
              <el-input disabled type="textarea" :rows="7" placeholder="请输入需求内容" v-model="serviceData.requirementDesc" maxlength="500" show-word-limit></el-input>
            </div>
        </div>
      </div>
  </div>
</template>
<script>
import {getProductTypeList, requirementDetailPrivate,requirementClose} from "@/api/homeApi";
import moment from 'moment';
export default {
  data() {
    return {
      moment,
      formLoading: false,
      applyBtnLoading:false,
      serviceTypeData: [],
      tableData:[],
      detailStep: 0,
      radio:0,
      services: [
        {
          order: '1',
          serviceId: '1',
          serviceName: '服务商名称',
          servicePhone: '联系方式',
          applyTime: '申请对接时间',
        }
      ],
      serviceData: {
        requirementId:'',
        requirement: '',
        requirementTypeId: '',
        publishTime:'',
        serviceCount: '',
        status: '',
        requirementDesc:'',
        companyPhone: '',
        companyName: '',
      },
      requirementId:'',
      status:''
    }
  },
  components: {

  },
  mounted() {
        this.requirementId = this.$route.query?.id;
        if(this.requirementId){
            this.getRequirementDetail()
        }
        this.getProductType()
  },
  methods: {
    closeRequirement(){
        this.$confirm('是否关闭需求？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }).then(() => {
            requirementClose({requirementId:this.requirementId}).then(res => {
                if (res.code === 200) {
                    this.$message({
                    type: 'success',
                    message: '关闭需求成功!'
                    });
                }
                this.getRequirementDetail()
            })
        }).catch(() => {
            this.$message({
            type: 'info',
            message: '已取消关闭需求'
            });
        });
    },
    getProductType() {
      getProductTypeList().then(res => {
        if (res.code === 200) {
          this.serviceTypeData = [...res.data]
        }
      })
    },
    goBackList() {
      this.$router.push({name: '我的需求管理'})
    },
    // 产品暂存或者上架
    getRequirementDetail() {
      this.formLoading = true
      requirementDetailPrivate({requirementId:this.requirementId}).then(res => {
        this.formLoading = false
        if (res.code === 200) {
           this.serviceData = res.data
           this.services = res.data.services
           if(this.serviceData.status == 0){
               this.detailStep = 1
           } else if(this.serviceData.status == 1 || this.serviceData.status == 5){
               this.detailStep = 3
           } else if(this.serviceData.status == 2){
               this.detailStep = 2
           }
        }
      })
    },
    reviewItem(row) {
       this.$router.push({path:'/companyDetail',query:{id:row.serviceId}})
    }
  }
}
</script>

<style scoped>
/deep/.el-textarea.is-disabled .el-textarea__inner {
  color: #606266;
}
p {
  margin: 0;
  padding: 0;
}

.submit_box {
  margin-top: 42px;
  width: 100%;
  text-align: center;
}
.left-border{
    border-left: 3px solid #436AF7;
}
</style>
